<template>
  <div class="login_wrap flex" style="justify-content: center" >
    <div class="">

      <el-form
          ref="formRef"
          :model="loginData"
          label-width="100px"
          class="demo-dynamic"
      >
        <el-form-item
            prop="userName"
            label="用户名"
            style="color: #ffffff"
            :rules="[
                        {
                        required: true,
                        message: '此项为必填项',
                        trigger: 'blur',
                        },
                    ]"
        >
          <el-input v-model="loginData.userName"/>
        </el-form-item>

        <el-form-item
            prop="password"
            label="密码"
            :rules="[
                    {
                    required: true,
                    message: '此项为必填项',
                    trigger: 'blur',
                    },
                ]"
        >
          <el-input type="password" v-model="loginData.passWord"/>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="login_btn" @click="handleLogin">登录</el-button>
      <!-- <p>{{num}}</p> -->
    </div>
  </div>

</template>
<script setup>
import {login} from '../../api/request.js'
import {reactive, ref} from 'vue'
import {ElMessage} from "element-plus";
import { useRouter } from "vue-router"
import{ useStore }from "vuex"
const count=1
const router=useRouter()
const store =useStore()
const loginData = reactive({
    userName: "",
    passWord: ""
})
const handleLogin=()=>{
  var param =loginData
  login(param).then(res=>{
    ElMessage({
      message: '登录成功',
      type: 'success',
    })
    store.commit('setUserInfo', loginData);
    console.log("登录信息",res)
    router.push("/")
  }).catch(error=>{
    console.log("登录失败",error)
    ElMessage({
      message: '登录失败',
      type: 'error',
    })
  })
}



</script>

<style  >
.login_wrap {
  width: 100vw;
  height: 100vh;
  background: #38568B;
  //position: relative;
}

.form_wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 30px 50px;
  border-radius: 5px;
}

.login_btn {
  display: block;
  margin: 10px auto;
}

.el-form-item__label {

  color: #ffffff !important; /* 设置 label 的字体颜色 */

}
</style>
